<template>
<div class="picker-content" ref="wrap">
  <div :style="`background-image:${bgColor}`"  class="bgc"></div>
  <div :style="`background-image:${maskColor}`" class="mask" ref="mask"></div>
  <ul>
    <li v-for="i of 19" :style="'left:'+i*(100/19)+'%'"></li>
  </ul>
  <div class="title">
    <slot name="title">
      <span>色温</span>
      <span>4000K</span>
    </slot>
  </div>
  <div class="line" ref="line"></div>
</div>
</template>

<script>
export default {
  name: "mkEditPicker",
  props:{
    maskWidth:{
      type:Number,
      default:50
    },
    min:{},
    max:{},
    value:{},
    maskColor:{
      type:String,
      default:'linear-gradient(to right,#999 0,#999 60%,transparent 100%);'
    },
    bgColor:{
      type:String,
      default: ''
    }
  },
  data(){
    return{
      moved:true
    }
  },
  mounted() {
    this.line = this.$refs.line
    this.mask = this.$refs.mask
    this.wrap = this.$refs.wrap
    this.line.addEventListener('mousedown',this.lineMousedown)
    this.line.addEventListener('mouseup',this.lineMouseup)
    this.line.addEventListener('mouseleave',this.lineMouseleave)
    this.init()
  },
  methods:{
    init(){
      let wrapRect = this.wrap.getBoundingClientRect()
      let lineLeft = Math.abs(Math.floor((this.value/100)*wrapRect.width))
      this.line.style.left = `${lineLeft}px`
      console.log(lineLeft)
      this.mask.style.transform = `translateX(-${(lineLeft/wrapRect.width) * this.maskWidth}%)`
      console.log(lineLeft*wrapRect.width)

    },
    lineMouseup(){
      this.line.removeEventListener('mousemove',this.lineMouseMove)
    },
    lineMousedown(){
      this.line.addEventListener('mousemove',this.lineMouseMove)
    },
    lineMouseMove(event){
      // if (this.moved){
        this.moved = false
        let wrapRect = this.wrap.getBoundingClientRect()
        let pageX = event.pageX
        let lineLeft = pageX - wrapRect.left - (this.line.offsetWidth/2)
        this.line.style.left = `${lineLeft}px`
        this.mask.style.transform = `translateX(-${lineLeft/(wrapRect.width)*this.maskWidth}%)`
        let x
        if (this.line.offsetLeft<=0){
          x = 0
          this.line.style.left = `${0}px`
        }else {
          x = (lineLeft+6-(wrapRect.width/2))/(wrapRect.width/2)
        }
        if (x>1) x = 1;
        this.$emit('input',x)
        this.$emit('change',x)
      //   setTimeout(()=>{
      //     this.moved = true
      //   },50)
      // }
    },
    lineMouseleave(){
      this.line.removeEventListener('mousemove',this.lineMouseMove)
    }
  }
}
</script>

<style scoped>
.picker-content{
  width: 160px;
  height: 60px;
  /*border: 1px solid red;*/
  background-color: #f9f9f9;
  position: relative;
  overflow: hidden;
}

ul{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
li{
  list-style: none;
  width: 1px;
  height: 10px;
  background-color: #fcfcfc;
  position: absolute;
}
ul li:nth-of-type(5),ul li:nth-of-type(10),ul li:nth-of-type(15){
  height: 14px;
  background-color: white;
}
.bgc{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.mask{
  width: 200%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /*transform: translateX();*/
  /*background-image: linear-gradient(to right,#2989CC 20%,#969696 54%,#ECBB35 100%);*/
}
.title{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  user-select: none;
}
.line{
  position: absolute;
  width: 4px;
  background-color: #ccc;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
</style>
